<template>
	<div class="wrap">
		<!-- 内容 -->
		<div class="content">
			<router-view></router-view>
		</div>
		<!-- 下方导航 -->
		<div class="nav">
			<router-link to="/" style="color:red;"><img src="images/nav_home.svg" alt="">首页</router-link>
			<router-link to="/member">会员</router-link>
			<router-link to="/class">分类</router-link>
			<router-link to="/shop">购物车</router-link>
			<router-link to="/my">我的</router-link>
		</div>
	</div>
</template>
<style type="text/css" lang="less">
/*使用less样式*/
@import './common/css/reset.css';
	.nav{
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		border-top: 1px solid #ccc;
		background: white;
		z-index: 999;

		a{
			flex:1;
			display: block;
			text-align: center;
			line-height: 50px;
			color: black;
		}
	}
	.content{
		font-size: 30px;
		padding-bottom: 50px;
	}
</style>
<script>
	export default {
		mounted(){
			console.log("开始创建");
			console.log(this);
			
		}
		// $(".nav").toggle();

	}
</script>